﻿<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="telephone=no,email=no" name="format-detection" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link href="assets/css/mobile_common.min.css" rel="stylesheet" />
    <script>window.devicePixelRatio = 1;</script>
    <script src="assets/js/flexible.min.js"></script>
    <meta name="apple-mobile-web-app-title" content="新汝之家" />
    <meta name="Keywords" content="新汝之家" />
    <meta name="description" content="想知道每朵蓝玫瑰背后的秘密吗？请关注新汝之家微信平台" />
    <link rel="subresource" href="assets/images/start.jpg" />
    <link rel="subresource" href="assets/images/loading.png" />
    <link rel="stylesheet" href="assets/css/xinruzhijia.css" />
    <title>蓝玫瑰背后的秘密-答案就在新汝之家</title>
</head>
<body>
    <div class="start">
        <img src="assets/images/start.jpg" style="position: absolute; width: 100%; height: 100%;" />
        <div class="loading-container">
            <img src="assets/images/loading.png" class="loading" id="loadingImg" alt="" />
            <p id="process">3%</p>
        </div>        
    </div>
    <div class="page page1">
        <div class="left-branch">
            <img src="assets/images/left_root.png" class="left-root-branch animated" data-animation="fallingdown1" alt="" />
            <img src="assets/images/left_top.png" class="left-top-branch animated" data-animation="fallingdown2" alt="" />
            <img src="assets/images/left_right.png" class="left-right-branch animated" data-animation="fallingdown1" alt="" />
            <img src="assets/images/left_middle.png" class="left-middle-branch animated" data-animation="fallingdown1" alt="" />
            <img src="assets/images/left_bottom.png" class="left-bottom-branch animated" data-animation="fallingdown" alt="" />
        </div>
        <div class="right-branch">
            <img src="assets/images/right_root.png" class="right-root-branch animated" data-animation="fallingdown6" alt="" />
            <img src="assets/images/right_top.png" class="right-top-branch animated" data-animation="fallingdown7" alt="" />
            <img src="assets/images/right_left.png" class="right-left-branch animated" data-animation="fallingdown6" alt="" />
            <img src="assets/images/right_middle.png" class="right-middle-branch animated" data-animation="fallingdown5" alt="" />
            <img src="assets/images/right_bottom.png" class="right-bottom-branch animated" data-animation="fallingdown5" alt="" />
        </div>
        <div class="tip branchTip"><span class="tip-msg">点击树枝，斩断荆棘</span><span class="tip-circle animated infinite tiping"></span></div>
        <!--<span class="left-branch animated" data-animation="slideOutLeft"></span>
        <span class="right-branch animated" data-animation="slideOutRight"></span>-->
        <div class="door">
            <div class="left-door"></div>
            <div class="right-door"></div>
        </div>
        <div class="tip doorTip"><span class="tip-msg">推开大门，遇见奇迹</span><span class="tip-circle animated infinite tiping"></span></div>
        <img src="assets/images/light.png" class="light animated" alt="" />
    </div>
    <div class="page page2">
        
        <div class="sky-wrapper" id="skyWrapper">
            <div id="test" style="position: absolute; z-index: 100; text-align: center; width: 100%; color: #fff; font-size: 0.5rem;"></div>
        </div>
        <div class="garden">
            <img src="assets/images/roses.png" class="roses" alt="" />
            <img src="assets/images/phone.png" class="phone animated infinite" alt="" />
        </div>        
    </div>
    <canvas id="fogCanvas"></canvas>
    <div class="tip" id="fogTip"><span class="tip-msg">涂抹屏幕，拔开迷雾</span><span class="tip-circle animated infinite tiping"></span></div>
    <div style="display: none;">
        <img src="assets/images/sky.jpg" />
        <img src="assets/images/rose9.png" />
        <img src="assets/images/rose1.png" />
        <img src="assets/images/rose2.png" />
        <img src="assets/images/rose3.png" />
        <img src="assets/images/rose4.png" />
        <img src="assets/images/rose5.png" />
        <img src="assets/images/rose6.png" />
        <img src="assets/images/rose7.png" />
        <img src="assets/images/rose8.png" />
    </div>
    <div id="popup">
        <p class="popup-content">想知道每朵蓝玫瑰背后的故事吗？<br />关注“新汝之家”微信平台，12月为您揭晓答案<br />2016让我们遇见奇迹</p>
        <img src="assets/images/qr.jpg" class="qr-img" alt="" />
        <p class="popup-content">长按二维码识别关注</p>
</div>
    <script>
        (function () {
            var loadingImg = document.getElementById('loadingImg'), hasLoaded = false, startNum = 3, process = document.getElementById('process');
            var intervalId = window.setInterval(function () {
                startNum += 6;
                if (startNum > 100) {
                    startNum = 100;
                }
                if (!hasLoaded && startNum >= 100) {
                    startNum = 97;
                }
                process.innerHTML = startNum + '%';
                if (hasLoaded && startNum >= 100) {
                    clearInterval(intervalId);
                    document.getElementsByClassName('start')[0].classList.add('fog-hide');
                    setTimeout(function () {
                        document.getElementsByClassName('start')[0].style.display = 'none';
                    }, 1000);
                }
            }, 500);
            window.onload = function () {
                hasLoaded = true;
                if (startNum <= 50) {
                    return;
                }
                clearInterval(intervalId);
                process.innerHTML = '100%';
                document.getElementsByClassName('start')[0].classList.add('fog-hide');
                setTimeout(function () {
                    document.getElementsByClassName('start')[0].style.display = 'none';
                }, 1000);
            };
        })();
    </script>
    <script src="assets/js/min.js"></script>
    <script src="assets/js/three.min.js"></script>
    <script src="assets/js/deviceorientation.js"></script>
    <script src="assets/js/xinruzhijia.js"></script>
    <script>
        window.onerror = function (a, b, c) {
            //alert(a + ' ' + b + ' ' + c);
        };
    </script>
</body>
</html>